<template>
  <div class="label-template-tab">
    <div class="template-preview">
      <div class="template-content">
        <!-- 动态渲染标签配置项 -->
        <div v-for="(item, index) in labelItems" :key="index" class="template-row">
          <!-- type=1: 物料字段 -->
          <template v-if="item.type === 1">
            <div class="template-field">
              <span class="field-label">{{ item.fieldName }}</span>
              <span class="field-value">自动获取数据</span>
            </div>
          </template>

          <!-- type=2: 文本输入 -->
          <template v-else-if="item.type === 2">
            <div class="template-field">
              <span class="field-label">{{ item.leftText }}</span>
              <span class="field-value">{{ item.rightText }}</span>
            </div>
          </template>

          <!-- type=3: 条形码 -->
          <template v-else-if="item.type === 3">
            <div class="template-field">
              <span class="field-label">条形码</span>
              <div class="barcode-container">
                <div class="barcode-placeholder">
                  <div class="barcode-lines">
                    <div
                      class="barcode-line"
                      v-for="i in 20"
                      :key="i"
                      :style="{ width: Math.random() * 3 + 1 + 'px' }"
                    ></div>
                  </div>
                </div>
              </div>
            </div>
          </template>

          <!-- type=4: 二维码 -->
          <template v-else-if="item.type === 4">
            <div class="template-field">
              <span class="field-label">二维码</span>
              <div class="qrcode-container">
                <div class="qrcode-placeholder">
                  <img src="@/assets/images/qrcode.png" alt="二维码" class="qrcode-image" />
                </div>
              </div>
            </div>
          </template>
        </div>

        <!-- 空状态 -->
        <div v-if="!labelItems || labelItems.length === 0" class="empty-state">
          <div class="empty-text">暂无标签配置</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  materialId: {
    type: [String, Number],
    required: true
  },
  materialInfo: {
    type: Object,
    default: () => ({})
  }
})

// 标签配置项列表
const labelItems = computed(() => {
  const labelData = props.materialInfo?.labelConfigurationToEntity || []
  const fieldList = props.materialInfo?.fieldConfigurationToEntity || []

  if (!labelData || labelData.length === 0) {
    return []
  }

  // 转换标签配置数据
  return labelData.map((item) => {
    const convertedItem = {
      type: item.type || 1 // 1=物料字段, 2=文本输入, 3=条形码, 4=二维码
    }

    // type=1: 物料字段，需要从 fieldConfigurationToEntity 中匹配字段名称
    if (item.type === 1) {
      const fieldId = item.id
      // 从字段列表中查找对应的字段
      const field = fieldList.find((f) => f.id === fieldId || String(f.id) === String(fieldId))
      if (field) {
        convertedItem.fieldName = field.fieldName || ''
      } else {
        convertedItem.fieldName = '未知字段'
      }
    }
    // type=2: 文本输入，需要 leftText 和 rightText
    else if (item.type === 2) {
      // 接口返回的 value 格式是 "leftText,rightText"
      const valueParts = (item.value || '').split(',')
      convertedItem.leftText = valueParts[0] || ''
      convertedItem.rightText = valueParts[1] || ''
    }
    // type=3(条形码)和type=4(二维码)不需要额外字段

    return convertedItem
  })
})
</script>

<style lang="scss" scoped>
.label-template-tab {
  height: 100%;
  padding: 20px;

  .template-preview {
    background: white;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 0;
    max-width: 480px;
    overflow: hidden;

    .template-content {
      .template-row {
        display: flex;
        border-bottom: 1px solid #f0f0f0;

        // 最后一行移除下边框
        &:last-child {
          border-bottom: none;
        }

        .template-field {
          display: flex;
          width: 100%;

          .field-label {
            color: #333;
            font-weight: 500;
            min-width: 120px;
            padding: 12px 16px;
            background-color: #e6f7ff;
            display: flex;
            align-items: center;
            box-sizing: border-box;
          }

          .field-value {
            color: #303133;
            flex: 1;
            padding: 12px 16px;
            text-align: left;
            background-color: white;
            box-sizing: border-box;
          }

          .barcode-container,
          .qrcode-container {
            flex: 1;
            display: flex;
            justify-content: flex-start;
            padding: 12px 16px;
            background-color: white;
            box-sizing: border-box;

            .barcode-placeholder,
            .qrcode-placeholder {
              display: flex;
              flex-direction: column;

              .barcode-lines {
                display: flex;
                align-items: center;
                gap: 2px;
                padding: 8px 0;

                .barcode-line {
                  height: 40px;
                  background: #000;
                  display: inline-block;
                }
              }

              .qrcode-image {
                width: 100px;
                height: 100px;
                object-fit: contain;
              }
            }
          }
        }
      }

      .empty-state {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 60px 0;

        .empty-text {
          color: #909399;
          font-size: 14px;
        }
      }
    }
  }
}
</style>
